<template>
    <div class="app-container">
        <el-row :gutter="20">
              <!--用户数据-->
          <el-col :span="24" :xs="24">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
              <el-form-item label="订单编号" prop="billInfoId">
                  <el-input
                  v-model="queryParams.billInfoId"
                  placeholder="请输入订单编号"
                  clearable
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                  />
              </el-form-item>
              <el-form-item label="订单时间">
            <el-date-picker
              v-model="queryParams.billDate"
              style="width: 240px"
              value-format="yyyy-MM"
              type="month"
              @keyup.enter.native="handleQuery"
            ></el-date-picker>
          </el-form-item>
              <el-form-item label="用户名称" prop="nickName">
                  <el-input
                  v-model="queryParams.nickName"
                  placeholder="请输入用户名称"
                  clearable
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                  />
              </el-form-item>
              <!-- 两个按钮 -->
              <el-form-item>
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
          </el-form>
            </el-col>

            <el-table :data="paymentList">
            <el-table-column label="订单编号" align="center" prop="billInfoId" />
            <el-table-column label="月份" align="center"  prop="billDate" />
            <el-table-column label="用户名称" align="center" prop="nickName" />    
            <el-table-column label="金额" align="center" prop="payAmounts" />      
            <el-table-column label="报告详情" align="center">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    @click="jumpReportDetail(scope.row.billInfoId)">
                    报告详情</el-button>
            </template>
            </el-table-column>
            <el-table-column label="支付状态" align="center" >
              <template slot-scope="scope">
              <el-button v-if="scope.row.payMethod" type="success" @click="jumpBillsDetail(scope.row.billInfoId)">已支付</el-button>
            </template>
          </el-table-column>
            </el-table>
        </el-row>
    </div>
  </template>

  <script>
  import {  getBillAllList  } from "@/api/system/bill";

  export default {
    name: "DayElecInfo",
    data() {
      return {
        showDayChart: true,
        showMonChart: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 每日用电情况表格数据
        list:[],
        dayElecInfoList: [],
        dayElec:[],
        //每月用电情况表格数据
        monthElecInfoList: [],
        monthElec:[],
        monthElecYear:[],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          eUsage: null,
          eTime: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        },
        // 折线图
        myChart: {},
        monthChart: {},
        xData: [], //横坐标
        yData: [], //电量数据
        myChartStyle: { float: "left", width: "100%", height: "400px" } ,//图表样式
        monthChartStyle: { float: "left", width: "100%", height: "400px" } ,//图表样式
       //账单表格
        paymentList: [],
        month:[],
        // 账单状态
        ispaid: false,
        //用户id
        userId: null,
      };
    },
    mounted() {
      this.getList();
    },

    methods: {
      getList() {
           this.loading = true;
           getBillAllList().then(response => {
           console.log(response);
                  response.forEach(item => {
                  if (item.payMethod != 0) {
                    const monthMatch = item.billDate.match(/^(\d{4}-\d{2})/); // 匹配'-'后跟随两个数字再跟随'-'的部分
                    if (monthMatch) {
                      item.billDate = monthMatch[1]; // 获取匹配到的数字部分
                  }
                    this.paymentList.push(item);

                }
                })
              });
      },
      // 跳转订单详情
      jumpBillsDetail:function(id){
      const payId = id;
      this.$router.push({path:"/system/billsDetail/ele-billsdetail/" + payId,query:{id:payId}});
      },
      //跳转报告详情
      jumpReportDetail: function(id){
      console.log("ni"+id);
      this.$router.push("/system/reportDetail/ele-report/" + id);
      },
      //搜索按钮操作
      handleQuery() {
          this.queryParams.pageNum = 1;
          this.billmentList = this.paymentList;
          this.paymentList = [];
          this.billmentList.forEach(item => {

            let matches = true; // 假设当前项匹配所有条件

            // 检查billInfoId（如果已给出）
            if (this.queryParams.billInfoId && item.billInfoId != this.queryParams.billInfoId) {
              matches = false; // 如果billInfoId不匹配，则不再检查其他条件

            }

            // 检查billDate（如果已给出）
            if (this.queryParams.billDate && item.billDate !== this.queryParams.billDate) {
              matches = false; // 如果billDate不匹配，则不再检查其他条件
            }

            // 检查nickName（如果已给出）
            if (this.queryParams.nickName && item.nickName !== this.queryParams.nickName) {
              matches = false; // 如果nickName不匹配，则不再检查其他条件
            }

            // 如果所有条件都匹配，则将项添加到paymentList
            if (matches) {
              this.paymentList.push(item);
            }

          })

      },
      /** 重置按钮操作 */
      resetQuery() {
          this.paymentList = [];
          this.queryParams.billDate = [];
          this.resetForm("queryForm");
          this.getList();
      }
}};
  </script>
